<template>
	<view>
		<u-toast ref="uToast" />
		<view class="sticky-nav">
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar">
				<view class="top_view"></view>
			</view>
			<!-- #endif -->
			<view class="top-nav">
				<view class="nav-slot-wrap-title nav-slot-wrap-title-black">
					我的课程
				</view>
				<view class="q_bank" @click="open_q_bank">
					在线刷题
					<u-icon name="play-right-fill" color="rgba(49,117,255,.5)" size="28"></u-icon>
				</view>
			</view>
			<filter-box :categories1="scenes" :categories2="categories" :cid1="pagination.scene" :cid2="pagination.cid"
				@change="filterChange"></filter-box>
		</view>

		<view class="section-box" v-if="list&&list.length>0">
			<block v-for="(item,index) in list">
				<course-item v-if="item.goods_type=='course'" :key="index" :item="item.courseInfo" :hasBuy="true">
				</course-item>
				<pay-article-item v-if="item.goods_type=='pay-article'" :key="index" :item="item.articleInfo">
				</pay-article-item>
			</block>
		</view>
		<empty v-else :loading="loading"></empty>

		<view class="loadmore" v-if="list&&list.length>0">
			<u-loadmore @loadmore="getData(true)" :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				background: {
					backgroundColor: "rgba(0,0,0,0)"
				},
				// {
				// 		id: "default",
				// 		name: "全部",
				// 	},
				scenes: [{
						id: "course",
						name: "点播",
					},
					{
						id: "pay-article",
						name: "图文",
					},
				],
				list: [],
				pagination: {
					pageIndex: 1,
					pageSize: 10,
					scene: "course",
					cid: 0,
					need_user_info: true
				},
				categories: [],
				over: false,
				loading: false,
			};
		},
		computed: {
			loadStatus() {
				if (this.over) {
					return "nomore";
				}
				if (this.loading) {
					return "loading";
				}
				return "loadmore";
			},
		},
		onLoad(options) {
			that = this;
			vk = that.vk;
			this.pagination.scene = options.scene ?? 'course'
			this.pagination.cid = options.cid ?? 0

			this.getData();
		},
		onReachBottom() {
			this.getData(true);
		},
		onPullDownRefresh() {
			this.resetData();
			this.getData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500);
		},
		methods: {
			open_q_bank(){
				uni.vk.navigateTo("/uni_modules/uce-q-bank/pages/index/index")
			},
			filterChange(scene, cid) {
				this.pagination.scene = scene;
				this.pagination.cid = cid;
				this.resetData();
				this.getData();
			},
			resetData() {
				this.list = [];
				this.pagination.pageIndex = 1;
				this.over = false;
			},
			getData(more = false) {
				if (this.loading) {
					return;
				}
				if (more) {
					this.pagination.pageIndex++;
				}
				this.loading = true;

				vk.callFunction({
					url: 'client/learn/pub/my_goods',
					data: that.pagination,
					success(data) {
						let list = data.rows;
						if (list.length > 0) {
							that.list.push(...list);
						}
						setTimeout(() => {
							that.loading = false;
							if (list.length < that.pagination.pageSize) {
								that.over = true;
							}
						}, 200);
					},
					fail(e) {
						that.loading = false;
						that.$refs.uToast.show({
							title: e.msg
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.top-nav {
		padding-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.q_bank{
		margin: 0 20rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		padding: 0rpx 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		background: #efefef;
	}

	.sticky-nav {
		position: sticky;
		z-index: 999;
		top: 0;
		width: 100%;
		background-image: linear-gradient(164deg, rgba(114,160,255,.2) 0%, #ffffff 38%, #ffffff 78%, #ffffff 100%);

		// background: #FFFFFF;
	}

	.section-box {
		position: relative;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}
</style>
